<!-- src/layouts/MainLayout.vue -->
<template>
    <div class="main-layout">
      <AppHeader @logout="handleLogout" />
      
      <main class="main-content">
        <router-view />
      </main>
      
      <AppFooter @tab-change="handleTabChange" />
    </div>
  </template>
  
  <script setup>
  import AppHeader from '@/components/AppHeader.vue'
  import AppFooter from '@/components/AppFooter.vue'
  import { useRouter } from 'vue-router'
  import { useRoute } from 'vue-router'
  import { watch } from 'vue'
  import axios from 'axios'
  
  const router = useRouter()
  const route = useRoute()
  watch(() => route.meta.title, (newTitle) => {
  document.title = newTitle || 'ERP系统'
})
  const handleLogout = async () => {
    try {
      await axios.post('/api/mobile/logout')
      localStorage.removeItem('token')
      router.push('/login')
    } catch (error) {
      console.error('退出登录失败:', error)
    }
  }
  
  const handleTabChange = (tab) => {
    if (tab === 'profile') {
      router.push('/profile')
    } else {
      router.push('/home')
    }
  }
  </script>
  
  <style scoped>
  .main-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background-color: #f7f8fa;
  }
  </style>